<template>
    <el-card v-loading="loading" shadow="never" body-style="padding: 24px;" class="card-margin">
        <el-row>
            <el-col :span='15'>
                 <el-form ref="form" :model="myScheme" label-width="80px">
                    <el-form-item label="培养方案:">
                        <el-select v-model="myScheme" placeholder="请选择培养方案" style="width: 200px">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
           <el-col :span="9">
               <template>
                <!-- <el-button
                    type="text"
                    style="float: right;"
                    @click="exportDoc"
                >{{ $t('common.btn.export') }} DOC</el-button> -->
                <el-button
                    type="text"
                    style="float: right; margin-right: 8px;"
                    :disabled="!id"
                    @click="exportPdf"
                >{{ $t('common.btn.export') }} PDF</el-button>
            </template>
           </el-col>
        </el-row>

        <el-row>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="填写章节样例（中文）" name="chinese"></el-tab-pane>
                <el-tab-pane label="填写章节样例（英文）" name="english"></el-tab-pane>
            </el-tabs>
        </el-row>
        <div>
            <!-- <h2 style="text-align: center;margin-top:15px">{{ schemeInfo.title }}</h2> -->
            <h2 v-if="activeName === 'chinese'"  style="text-align: center;margin-top:15px">{{ schemeInfo.name }}</h2>
            <h2 v-if="activeName === 'english'"  style="text-align: center;margin-top:15px">{{ schemeInfo.nameEn }}</h2>
            <div v-if="activeName === 'chinese'&&show">
                <div v-for="(item, index) in schemeChapters" :key="index" style="padding: 24px;">
                    <div v-if="item.contentType == 1">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <p style="word-break: break-all" v-html="item.content"></p>
                        <hr />
                    </div>
                    <div v-if="item.contentType == 2">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <div v-if="item.detailTable">
                            <p v-html="item.detailTable.contentBefore"></p>
                            <template>
                                <courseCategoryForm
                                    v-if="item.detailTable.table === 1"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="2"
                                    :in-change="schemeInfo.status == 5"
                                />
                                <courseForm
                                    v-else
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="2"
                                    :in-change="schemeInfo.status == 5"
                                    :projId="1"
                                />
                            </template>
                            <p v-html="item.detailTable.contentAfter"></p>
                        </div>
                        <hr />
                    </div>
                    <div v-if="item.contentType == 3 || item.isOldContent">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <div>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentBefore"></p>
                            <template>
                                <courseForm
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="2"
                                    :in-change="schemeInfo.status == 5"
                                    :projId="1"
                                />
                            </template>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentAfter"></p>
                        </div>
                        <hr />
                    </div>
                </div>
            </div>
            <div v-if="activeName === 'english'&&show">
                <div v-for="(item, index) in schemeChapters" :key="index" style="padding: 24px;">
                    <div v-if="item.contentType == 1">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <p style="word-break: break-all" v-html="item.contentEn"></p>
                        <hr />
                    </div>
                    <div v-if="item.contentType == 2">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <div v-if="item.detailTable">
                            <p v-html="item.detailTable.contentBeforeEn"></p>
                            <template>
                                <courseCategoryForm
                                    v-if="item.detailTable.table === 1"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="2"
                                />
                                <courseForm
                                    v-else
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="2"
                                    :projId="1"
                                />
                            </template>
                            <p v-html="item.detailTable.contentAfterEn"></p>
                        </div>
                        <hr />
                    </div>
                    <div v-if="item.contentType == 3 || item.isOldContent">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <div>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentBeforeEn"></p>
                            <template>
                                <courseForm
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="2"
                                    :in-change="schemeInfo.status == 5"
                                    :projId="projId"
                                />
                            </template>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentAfterEn"></p>
                        </div>
                        <hr />
                    </div>
                </div>
            </div>
            <div v-if="!show">
                <div class="no-culture-plan"></div>
                <div v-if="!myScheme"
                    style="text-align:center;margin-bottom:100px"
                >{{$t('culturePlan.noCultureTip')}}</div>
                <div v-else
                    style="text-align:center;margin-bottom:100px"
                >{{'请选择需查看的培养方案'}}</div>
            </div>
        </div>
    </el-card>
</template>

<script>
import * as API from "common/src/api/culture/cultruescheme";
import associatedApi from "common/src/api/ugdCulturePlan/associated";
import {
    getSchemeChapters,
    findCultureSchemeById,
    queryStudentCultureScheme
} from "common/src/api/culture/bachelor";
import courseCategoryForm from "common/src/views/culture/bachelor/courseCategoryForm";
import courseForm from "common/src/views/culture/bachelor/courseForm";
import UTILS from "common/src/utils/utils";
import mixin from 'common/src/mixins/index';
export default {
    name: "myBclCultureScheme",
    mixins: [mixin],
    components: {
        courseCategoryForm,
        courseForm
    },
    data() {
        return {
            loading: false,
            show: false,
            id: "",
            options: [],
            myScheme: "",
            activeName: "chinese",
            schemeIDs: "",
            schemeInfo: {},
            studentId:null,
            schemeChapters: {}
        };
    },
    created() {
        // this.queryStudentCultureScheme();
        this.findStudentId();
        this.queryStudentCultureScheme(this.studentId)
    },
    watch: {
        myScheme: function(_n, _o) {
            if (_n) {
                this.init();
            }
        }
    },
    methods: {
        init() {
            const params = {};
            this.id = this.myScheme;
            params.cultureId = this.myScheme;
            this.getSchemeChapters(params);
            this.getCultureScheme();
            
        },
        findStudentId(){
            if(this.$store.state.session){
                this.studentId = this.global.currentUser.uid;
            }
            // this.studentId='00101001'
            // this.queryStudentCultureScheme(this.studentId)
        },
        queryStudentCultureScheme(studentId){
            queryStudentCultureScheme(studentId).then(res=>{
               if(res.code==200){
                   console.log(res.data)
                   if(res.data.length > 0){
                       this.myScheme = res.data[0].id;
                       console.log(this.myScheme)
                       this.getCultureScheme();
                   }
                   this.options=res.data.map(item=>{
                       return{
                           label:item.name,
                           value:item.id
                       }
                   })
               }
                
            })
        },
        // 获取模板信息
        getCultureScheme() {
            if(!this.myScheme){
                return
            };
            let data = {
                id: this.myScheme
            };
            findCultureSchemeById(data)
                .then(res => {
                    if (res && res.code === 200) {
                        this.schemeInfo = res.data;
                        this.projId = res.data.projId;
                        let title =
                            res.data.grade +
                            "级" +
                            "  " +
                            res.data.trainingCategoryI18n +
                            "  " +
                            res.data.facultyI18n +
                            "  " +
                            res.data.campusProfessionName +
                            "(" +
                            res.data.campusProfession +
                            ")";
                        this.schemeInfo.title = title;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询培养方案信息失败"
                    });
                });
        },
        exportPdf() {
            let path =
                "/api/cultureservice/bclCultureScheme/exportCultureSchemePdf?id=" +
                    this.id +
                    "&x-token=" +
                    (this.$store.state.session.sessionid ||
                localStorage.getItem("sessionid") ||
                "") + "&language=" + this.$store.getters.language;
            window.open(path);
        },
        exportDoc() {
            let path =
                "/api/cultureservice/bclCultureScheme/exportCultureScheme?id=" +
                    this.id +
                    "&x-token=" +
                    (this.$store.state.session.sessionid ||
                localStorage.getItem("sessionid") ||
                "") + "&language=" + this.$store.getters.language;
            window.open(path);
        },
        getSchemeChapters(params) {
            if(!this.myScheme){
                return
            };
            getSchemeChapters(params).then(res => {
                if (res && res.code === 200) {
                    this.schemeChapters = res.data.map((ele, index) => {
                        ele.name =
                            UTILS.numberToChinese(index + 1) + "、" + ele.name;
                        ele.nameEn = index + 1 + "." + ele.nameEn;
                        return ele;
                    });
                    this.show=this.schemeChapters.length>0
                }
            });
        },
        handleClick(tab, event) {
            this.init();
        }
    }
};
</script>

<style scoped>
.no-culture-plan {
    background: url("/static/images/no-cultureplan.png");
    width: 444px;
    height: 249px;
    margin: 20px auto 40px;
}
</style>
